import React from 'react';
import { Form, Input, Button, message } from 'antd';
const FormItem = Form.Item;
import BreadCrumb from '@/view/comps/breadcrub/breadcrub';

const FORMINPUT = {
	labelCol: { span: 4 },
	wrapperCol: { span: 8 }
};
const FORMBUTTONN = {
	labelCol: { span: 4 },
	wrapperCol: { span: 8, offset: 4 }
};

export default class AddTag extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			name: '',
			desc: '',
		};
	}

	createUser = () => {
		const {
			name,
			desc
		} = this.state;
		const reqParam = {
			name,
			desc
		};
		AJAX({
			method: 'post',
			url: '/createTag',
			data: reqParam
		}).then(res => {
			if (res.errNo === 0) {
				message.success('创建成功');
			}
		}, err => {
			console.log(err);
			message.error(err.msg);
		});
	}

	render() {
		const {
			name,
			desc
		} = this.state;
		return (
			<div>
				<BreadCrumb bread={[{title: 'Dashboard', link: '/'}, {title: '标签列表', link: '/app/tag'}, {title: '新增标签'}]}/>
				<div className="page-container">
					<div className="form-control">
						<Form>
							<FormItem {...FORMINPUT} label="标签名称">
								<Input
									value={name} 
									onChange={e => this.setState({name: e.target.value})}
									placeholder="请输入名称" />
							</FormItem>

							<FormItem {...FORMINPUT} label="标签描述">
								<Input 
									value={desc}
									ref={ref => this.pwdRef = ref}
									onChange={e => this.setState({desc: e.target.value})}
									placeholder="请输入标签描述" />
							</FormItem>

							<FormItem {...FORMBUTTONN}>
								<Button type="primary" onClick={this.createUser}>创建</Button>
							</FormItem>
						</Form>
					</div>
				</div>
			</div>
		);
	}

}
